<!DOCTYPE html>
<html>
  <head>
    <title>{{ parameters["title"] }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">

    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-toggle.css">
    <link rel="stylesheet" href="static/css/style.css">

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/bootstrap-toggle.js"></script>
    
    <script src="static/js/script.js"></script>

  </head>
  <body>
  <div class="container">
    <div class="page-header" style="text-align:center; border-bottom: 3px solid #444;"> 
      <h2><b>{{ parameters["header"] }}</b></h2>
    </div>

    <!-- Connection Row BEGIN -->
    <div class="row well" style="border: 7px solid #b8b4b4; border-radius: 10px;">
      <div class="col-md-6"">
        <div class="row">
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px">
                <label style="font-size:large; margin-right: 32px"><b>IP Address</b></label>
                <input id="txt_IPOctet1" class="input-sm txt_ipOctet" style="width: 60px; font-weight:bold; font-size:large;" maxlength="3">
                <label style="font-size:large;"><b>.</b></label>
                <input id="txt_IPOctet2" class="input-sm txt_ipOctet" style="width: 60px; font-weight:bold; font-size:large;" maxlength="3">
                <label style="font-size:large;"><b>.</b></label>
                <input id="txt_IPOctet3" class="input-sm txt_ipOctet" style="width: 60px; font-weight:bold; font-size:large;" maxlength="3">
                <label style="font-size:large;"><b>.</b></label>
                <input id="txt_IPOctet4" class="input-sm txt_ipOctet" style="width: 60px; font-weight:bold; font-size:large;" maxlength="3" >
            </div>

            <div class="row" style="margin-bottom: 10px">
                <label style="font-size:large; margin-right: 16px"><b>Port Number</b></label>
                <input id="txt_portNumber" class="input-sm" style="width: 75px; font-weight:bold; font-size:large;" maxlength="5">
            </div>

            <div class="row"> 
              <label style="font-size:large; margin-right: 10px"><b>Connection</b></label>
              <input type="checkbox" id="chkbox_ClientStatus" data-on="On" data-off="Off" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="medium">
              <img id="img_connectionSpinner" src=static/images/loading32x32.gif style="margin-left:20px" hidden>   
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Connection Row END -->

    <!-- Operations Row BEGIN -->
    <div class="row well" id="div_Operations" style="border: 7px solid #b8b4b4; border-radius: 10px;" hidden>

      <div class="row" style="padding:0px">
        <h3 style="margin-top:0px"><b>Operations</b></h3>
      </div>

      <!-- Write Single Coil Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Write Single Coil (Discrete Outputs)</b></h4>
        <label style="font-size:medium; margin-right: 32px"><b>Coil Address</b></label>
        <input id="txt_coilAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <button id="btn_coilSet" type="button" class="btn btn-success btn_singleCoil">1</button>
        <button id="btn_coilReset" type="button" class="btn btn-danger btn_singleCoil">0</button>
        <img id="img_singleCoilSpinner" src=static/images/loading16x16.gif style="margin-left:10px" hidden>   
      </div>
      <!-- Write Single Coil Row END -->


      <!-- Write Multiple Coils Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Write Multiple Coils (Discrete Outputs)</b></h4>
        <label style="font-size:medium; margin-right: 1px"><b>Coil Start Address</b></label>
        <input id="txt_coilStartAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 13px"><b>Quantity of Coils</b></label>
        <input id="txt_quantityCoils" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 64px"><b>Bits Array</b></label>
        <input id="txt_coilsArray" class="input-sm" style="width:50%; font-weight:bold; font-size:medium;">
        <br>
        <button id="btn_sendCoils" type="button" class="btn btn-success">Send</button>
      </div>
      <!-- Write Multiple Coils Row END -->


      <!-- Read Coils Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Read Coils (Discrete Outputs)</b></h4>
        <label style="font-size:medium; margin-right: 1px"><b>Coil Start Address</b></label>
        <input id="txt_readCoilStartAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 13px"><b>Quantity of Coils</b></label>
        <input id="txt_readQuantityCoils" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <button id="btn_receiveCoils" type="button" class="btn btn-info">Receive</button>
        <br> 
        <div id="div_Results_Coils" class="alert alert-warning div_result" role="alert" style="margin-top:5px; overflow-wrap: break-word" hidden></div>
        
      </div>
      <!-- Read Coils Row END -->


      <!-- Write Single Register Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Write Single Register (Holding Registers)</b></h4>
        <label style="font-size:medium; margin-right: 32px"><b>Register Address</b></label>
        <input id="txt_registerAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 54px"><b>Register Value</b></label>
        <input id="txt_registerValue" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="5">
        <br>
        <button id="btn_sendRegister" type="button" class="btn btn-success">Send</button>
      </div>
      <!-- Write Single Register Row END -->


      <!-- Write Multiple Registers Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Write Multiple Registers (Holding Registers)</b></h4>
        <label style="font-size:medium; margin-right: 1px"><b>Register Start Address</b></label>
        <input id="txt_registerStartAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 13px"><b>Quantity of Registers</b></label>
        <input id="txt_quantityRegisters" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 55px"><b>Registers Array</b></label>
        <input id="txt_registersArray" class="input-sm" style="width:80%; font-weight:bold; font-size:medium;">
        <br>
        <button id="btn_sendRegisters" type="button" class="btn btn-success">Send</button>
      </div>
      <!-- Write Multiple Registers Row END -->


      <!-- Read Registers Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Read Registers (Holding Registers)</b></h4>
        <label style="font-size:medium; margin-right: 1px"><b>Register Start Address</b></label>
        <input id="txt_readRegisterStartAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 13px"><b>Quantity of Registers</b></label>
        <input id="txt_readQuantityRegisters" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <button id="btn_receiveRegisters" type="button" class="btn btn-info">Receive</button> 
        <br> 
        <div id="div_Results_Registers" class="alert alert-warning div_result" role="alert" style="margin-top:5px; overflow-wrap: break-word" hidden></div>
      </div>
      <!-- Read Registers Row END -->

      <hr style="border-top: 3px solid #aaa;">

      <!-- Read Concats Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Read Contacts (Discrete Inputs)</b></h4>
        <label style="font-size:medium; margin-right: 1px"><b>Contact Start Address</b></label>
        <input id="txt_readContactStartAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 13px"><b>Quantity of Contacts</b></label>
        <input id="txt_readQuantityContacts" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <button id="btn_receiveContacts" type="button" class="btn btn-info">Receive</button>
        <br> 
        <div id="div_Results_Contacts" class="alert alert-warning div_result" role="alert" style="margin-top:5px; overflow-wrap: break-word" hidden></div>
      </div>
        <!-- Read Coils Row END -->
  

      <!-- Read Input Registers Row BEGIN -->
      <div class="row well my_border" style="padding-top:8px; padding-left:5px">
        <h4 style="margin-top:0px; margin-bottom:15px;"><b>Read Input Registers</b></h4>
        <label style="font-size:medium; margin-right: 1px"><b>Register Start Address</b></label>
        <input id="txt_readInputRegisterStartAddress" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <label style="font-size:medium; margin-right: 13px"><b>Quantity of Registers</b></label>
        <input id="txt_readQuantityInputRegisters" class="input-sm" style="width:70px; font-weight:bold; font-size:medium;" maxlength="4">
        <br>
        <button id="btn_receiveInputRegisters" type="button" class="btn btn-info">Receive</button>
        <br> 
        <div id="div_Results_Input_Registers" class="alert alert-warning div_result" role="alert" style="margin-top:5px; overflow-wrap: break-word" hidden></div>
      </div>
      <!-- Read Input Registers Row END -->



    </div>
    <!-- Operations Row END -->



  </div>
  </body>
</html>